import React, { useEffect, useRef, useState } from 'react';
import { Modal, Form, Input, Space, Button } from '@arco-design/web-react';
import { IconLock } from '@arco-design/web-react/icon';

function ResetPassword(props) {
  const { visible, modalTitle, handleChangeVisible, onConfirm } = props;
  const [form] = Form.useForm();
  const FormItem = Form.Item;

  const changeVisible = () => {
    handleChangeVisible(false);
  };

  const onOk = () => {
    form.validate().then((value) => {
      onConfirm && onConfirm(value);
    });
  };

  useEffect(() => {
    form.resetFields();
  }, [visible]);

  return (
    <Modal
      title={modalTitle}
      visible={visible}
      autoFocus={false}
      focusLock={false}
      onOk={onOk}
      onCancel={changeVisible}
      okText="确认修改"
    >
      <Form form={form}>
        <FormItem
          field="password"
          rules={[{ required: true, message: '请设置新密码' }]}
        >
          <Input.Password prefix={<IconLock />} placeholder="请输入密码" />
        </FormItem>
        <FormItem
          field="againPassword"
          rules={[{ required: true, message: '请再次输入新密码' }]}
        >
          <Input.Password
            prefix={<IconLock />}
            placeholder="请再次输入新密码"
          />
        </FormItem>
      </Form>
    </Modal>
  );
}

export default ResetPassword;
